<template>
    <view v-if="showPrivacy" :class="privacyClass">
        <view :class="contentClass">
            <view class="title">用户隐私保护指引</view>
            <view class="des">
                感谢您选择使用我们的小程序，我们非常重视您的个人信息安全和隐私保护。使用我们的产品前，请您仔细阅读“
                <text class="link" @tap="openPrivacyContract">{{privacyContractName}} </text>”，
                如您同意此隐私保护指引,请点击同意按钮,开始使用此小程序,我们将尽全力保护您的个人信息及合法权益，感谢您的信任！<br />
            </view>
            <view class="btns">
                <button class="item reject" @tap="exitMiniProgram">拒绝</button>
                <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
                    @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'PrivacyPopup',
        data() {
            return {
                isRead: false,
                showPrivacy: false,
                privacyContractName: '',
                resolvePrivacyAuthorization: null,
            };
        },
        props: {
            position: {
                type: String,
                default: 'center'
            }
        },
        computed: {
            privacyClass() {
                return this.position === 'bottom' ? 'privacy privacy-bottom' : 'privacy';
            },
            contentClass() {
                return this.position === 'bottom' ? 'content content-bottom' : 'content';
            }
        },
        mounted() {
            if (wx.onNeedPrivacyAuthorization) {
                wx.onNeedPrivacyAuthorization((resolve) => {
                    this.resolvePrivacyAuthorization = resolve;
                });
            }

            if (wx.getPrivacySetting) {
                wx.getPrivacySetting({
                    success: (res) => {
                        console.log(res, 'getPrivacySetting');
                        if (res.needAuthorization) {
                            this.privacyContractName = res.privacyContractName;
                            this.showPrivacy = true;
                        }
                    },
                });
            }
        },

        methods: {
            openPrivacyContract() {
                wx.openPrivacyContract({
                    success: () => {
                        this.isRead = true;
                    },
                    fail: () => {
                        uni.showToast({
                            title: '遇到错误',
                            icon: 'error',
                        });
                    },
                });
            },
            exitMiniProgram() {

                wx.exitMiniProgram();

            },
            handleAgreePrivacyAuthorization() {
                this.showPrivacy = false;
                if (typeof this.resolvePrivacyAuthorization === 'function') {
                    this.resolvePrivacyAuthorization({
                        buttonId: 'agree-btn',
                        event: 'agree',
                    });
                }
            },
        },
    };
</script>

<style scoped>
    .privacy {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 9999999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .privacy-bottom {
        align-items: flex-end;
    }

    .content {
        width: 632rpx;
        padding: 48rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 16rpx;
    }

    .content-bottom {
        position: absolute;
        bottom: 0;
        width: 96%;
        padding: 36rpx;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        border-radius: 16rpx 16rpx 0 0;
    }

    .content .title {
        text-align: center;
        color: #333;
        font-weight: bold;
        font-size: 32rpx;
    }

    .content .des {
        font-size: 26rpx;
        color: #666;
        margin-top: 40rpx;
        text-align: justify;
        line-height: 1.6;
    }

    .content .des .link {
        color: #07c160;
        text-decoration: underline;
    }

    .btns {
        margin-top: 48rpx;
        margin-bottom: 12rpx;
        display: flex;
    }

    .btns .item {
        width: 200rpx;
        height: 72rpx;
        overflow: visible;
        display: flex;
        align-items: center;

        justify-content: center;
        /* border-radius: 16rpx; */
        box-sizing: border-box;
        border: none !important;
    }

    .btns .reject {
        background: #f4f4f5;
        color: #666;
        font-size: 14px;
        font-weight: 300;
        margin-right: 16rpx;
    }

    .btns .agree {
        width: 320rpx;
        background: #07c160;
        color: #fff;
        font-size: 16px;

    }

    .privacy-bottom .btns .agree {
        width: 440rpx;

    }
</style>
